<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Model Details</title>
	<link rel="stylesheet" href="style.css">
	<script src="app.js"></script>
	
</head>
<body>
	<nav class="navbar">
		<a href="index.html" class="nav-brand">k8s-ai-bench</a>
		<div class="nav-links">
			<a href="index.html" class="nav-btn active">Leaderboard</a>
			<a href="tasks.html" class="nav-btn">Tasks</a>
			<a href="about.html" class="nav-btn">About</a>
			<a href="https://github.com/GoogleCloudPlatform/kubectl-ai" class="nav-btn" target="_blank">GitHub &nearr;</a>
		</div>
	</nav>
	<div class="container">
		
		<a href="index.html" class="back-link">&larr; Back to Leaderboard</a>
		<h1 id="model-title">Loading...</h1>
		<div class="controls-area" style="flex-direction: row; margin-bottom: 1rem;">
			<span style="font-weight:600;">Run Filter:</span>
			<select id="run-select" onchange="renderPage()" style="padding: 5px; font-size:1rem;">
				<option value="all">All Runs</option>
				<option value="1">Run 1</option>
				<option value="2">Run 2</option>
				<option value="3">Run 3</option>
				<option value="4">Run 4</option>
				<option value="5">Run 5</option>
			</select>
		</div>
		<table id="details-table">
			<thead>
				<tr>
					<th data-idx="0" style="width: 30%;">Task Name</th>
					<th data-idx="1" style="width: 10%;">Run #</th>
					<th data-idx="2" style="width: 10%;">Result</th>
					<th style="width: 50%;">Details</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
		<script>
			window.renderPage = function() {
				if(!window.PROCESSED_DATA) return;
				const params = new URLSearchParams(window.location.search);
				const modelId = params.get('id');
				const data = window.PROCESSED_DATA.details[modelId];
				const runFilter = document.getElementById('run-select').value;
				
				if (!data) {
					document.getElementById('model-title').innerText = 'Model Not Found';
					return;
				}
				document.getElementById('model-title').innerText = 'Details: ' + modelId;
				const tbody = document.querySelector('#details-table tbody');
				
				let filteredData = data;
				if (runFilter !== 'all') {
					const targetRun = parseInt(runFilter);
					filteredData = data.filter(r => r.run === targetRun);
				}

				tbody.innerHTML = filteredData.map(row => {
					const badgeClass = row.result === 'success' ? 'success' : 'fail';
					let detailsHTML = '<span style="color:#999">-</span>';
					if (row.result === 'fail') {
						const msg = row.message || "No failure message provided.";
						detailsHTML = '<div class="failure-box"><div class="failure-msg">'+msg+'</div></div>';
					}
					return '<tr><td>'+row.task+'</td><td>'+row.run+'</td>' +
						   '<td><span class="result-badge '+badgeClass+'">'+row.result+'</span></td>' +
						   '<td>'+detailsHTML+'</td></tr>';
				}).join('');
			}
		</script>
	
	</div>
</body>
</html>